<template>
    <div class="board-column">
        <draggable :list="list" :rolVal="rolVal" v-bind="$attrs" :disabled="disabled" class="board-column-content"
            :set-data="setData">
            <div v-for="(x, index) in list" :key="index" :hoverable="false" @click="childMethod(x)" class="wode-wh">
                <img :src="x.iconBase64" class="img-wh" />
                <div class="titlehover">{{ x.appName }}{{ x.name }}</div>
            </div>
        </draggable>
    </div>
</template>
  
<script>
import draggable from 'vuedraggable'

export default {
    name: 'DragKanbanDemo',
    components: {
        draggable
    },
    props: {
        rolVal: {
            type: Number,
            default: 1
        },
        headerText: {
            type: String,
            default: 'Header'
        },
        disabled: {
            type: Boolean,
            default: true
        },
        options: {
            type: Object,
            default() {
                return {}
            }
        },
        list: {
            type: Array,
            default() {
                return []
            }
        }
    },
    mounted() {
    },
    methods: {
        childMethod(val) {
            if (val.isRouter) {
                if (val.isRouter == 0) {
                    this.$emit('GoUrl', val)
                }
            } else {//跳转url
                this.$emit('GoUrl', val) //调用父组件方法
            }
        },
        setData(dataTransfer) {
            // to avoid Firefox bug
            // Detail see : https://github.com/RubaXa/Sortable/issues/1012
            dataTransfer.setData('Text', '')
        }
    }
}
</script>
<style lang="less" scoped>
.board-column {
    min-width: 100%;
    min-height: 100px;
    /* height: auto; */
    /* overflow: hidden; */
    /* background: #f0f0f0; */
    border-radius: 3px;
}

.board-column-header {
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    background: #333;
    color: #fff;
    border-radius: 3px 3px 0 0;
}

.board-column-content {
    /* height: auto; */
    /*background-color: red;*/
    /* overflow: hidden; */
    /* border: 10px solid transparent; */
    min-height: 58px;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: flex-start;
    flex-direction: column; */
    /*align-items: center; */
}

.board-item {
    cursor: pointer;
    width: 100%;
    max-width: 200px;
    height: 64px;
    margin: 5px 20px;
    display: inline-block;
    /* background-color: #fff; */
    text-align: left;
    line-height: 54px;
    padding: 5px 10px;
    box-sizing: border-box;
    box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
}

/* .ant-card-grid:last-child { border-bottom:1px solid #1D60FF; } */
.lastmarginbottom :last-child {
    margin-bottom: 6px
}


.wode-wh {
    min-width: 25%;
    /* width: 20%; */
    /* flex-grow: 1; */
    cursor: pointer;
    /* display: flex;
    justify-content: space-evenly;
    flex-direction: column;*/
    align-items: center;
    box-sizing: border-box;
}

.img-wh {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.titlehover {
    height: 50px;
    /*min-width: 100%;*/
    width: 120px;
    margin: 8px auto;
    word-break: break-all;
    text-align: center;
    font-size: 13px;
    color: #4E5969;

}

.titlehover:hover {
    /* color: #1D60FF !important; */
    color: #ff4d4f !important;
}

.myapp-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;

    .myapp-selection {
        width: 20%;
        min-width: 230px;
        height: 100px;
        padding: 10px;
        //flex-grow: 1;
        box-sizing: border-box;

        .myapp-selection-center {
            position: relative;
            display: block;
            height: 100%;
            border-radius: 6px;
            border: 1px solid #e2e2e2;

            img {
                position: absolute;
                left: 16px;
                top: 16px;
                width: 48px;
                height: 48px;
            }

            span {
                display: inline-block;
                position: absolute;
                left: 80px;
                top: 18px;
                width: 50%;
                height: 44px;
                overflow: hidden;
            }

            input {
                outline: none;
                -webkit-appearance: none;
                -webkit-tab-highlight-color: rgba(0, 0, 0, 0);
                display: inline-block;
                position: absolute;
                width: 26px;
                height: 26px;
                right: 16px;
                top: 26px;
                text-align: center;
                vertical-align: baseline;
                line-height: 26px;
                border-radius: 50%;
                border: 1px solid #e2e2e2;
                color: #fff;
                background-color: #fff;
            }

            input[type="checkbox"]::before {
                content: "";
                position: absolute;
                right: 0;
                top: 0;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                color: #fff;
                box-sizing: border-box;
            }

            input[type="checkbox"]:checked::before {
                content: "\2713";
                position: absolute;
                width: 26px;
                height: 26px;
                right: 0;
                top: 0;
                border: 1px solid #2acc95;
                color: #fff;
                font-size: 1.2rem;
                border-radius: 50%;
                background-color: #2acc95;
            }
        }
    }

}
</style>
  
  